<template>
    <div><a href="" @click.prevent="toSingerPage()">
        <div class="img">
        <img :src="src" >
        </div></a>
        <h4>{{ singer.singer_name }}</h4>
    </div>
</template>
<script>
</script>
<style scoped>
    h4{
        margin: 0.8rem 0 0;
    }
    div{
        padding: 1.5rem;
        margin:-0.5rem;
        display: flex;
        flex-direction:column;
        align-items: center;
    }
    .img{
        width: 16.85rem;
        padding: 1.43rem;
        margin: -1.43rem;

    }
    img{
        width: 12rem;
        height: 12rem;
        border-radius:50%;
    }
    p{
        font-size: 8px;
        opacity:0.7;
    }
</style>

<script>
import { url } from '@/apiUrl';
export default {
    data(){
        return {
            src:`${url}/${this.singer.avatar_url}`
        }
    },
    props:{
        singer:{}
    },
    methods:{
      toSingerPage(){
        this.$router.push({
            name:"singerHpage",
            query:{
                singer:this.singer
            }
        })
      }
    }
}

</script>